<template>
  <div class="goodsBox">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="20%" status-icon>
      <el-row :gutter="150">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name" :disabled="disableIinput" size="small" type="text" placeholder="请输入商品名称"/>
          </el-form-item>
      <!--    <el-form-item label="商品编码" prop="itemSubTitle">
            <el-input v-model="ruleForm.itemSubTitle" :disabled="disableIinput" size="small" type="text" placeholder="请输入商品子标题"/>
          </el-form-item>-->
           <el-form-item label="品牌类型" prop="brand">
            <el-input v-model="ruleForm.brand" size="small" type="text" readonly placeholder="请选择商品品牌">
              <template slot="append"><el-button :disabled="disableIinput" style="cursor: pointer" @click="goodsName">选择</el-button></template>
            </el-input>
          </el-form-item>
          <!--<el-form-item label="商家" prop="desc">-->
          <!--<el-input v-model="ruleForm.sellerName" size="small" type="text" readonly placeholder="请选择商家">-->
          <!--<template slot="append"><el-button :disabled="disableIinput" style="cursor: pointer" @click="goodsShop">选择</el-button></template>-->
          <!--</el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="商品编码" prop="coding">
            <el-input v-model="ruleForm.coding" :disabled="disableIinput" size="small" type="text" placeholder="请输入商品编码">
              <template slot="append"><span style="cursor: pointer" @click="getSysNumberCode">系统生成</span></template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品标价货币" prop="currency">
            <el-select v-model="ruleForm.currency" :disabled="disableIinput" size="small" placeholder="请选择">
              <el-option :value="0" label="RMB"/>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格(元)" prop="price">
            <el-input v-model="ruleForm.price" :disabled="disableIinput" size="small" type="text" placeholder="请输入商品价格"/>
          </el-form-item>
          <el-form-item label="规格" prop="specification">
            <el-input v-model="ruleForm.specification" :disabled="disableIinput" size="small" type="text" placeholder="请输入规格"/>
          </el-form-item>
          <!-- 一良新增 -->
          <!--<el-form-item label="运费" prop="freight">
            <el-input v-model="ruleForm.freight" :disabled="disableIinput" size="small" type="number" placeholder="请输入运费"/>
            <span style="color: red">值为0则为免运费</span>
          </el-form-item>-->

          <el-form-item label="来源" prop="source">
            <el-input v-model="ruleForm.source" :disabled="disableIinput" size="small" type="text" placeholder="请输入商品产地"/>
          </el-form-item>

          <el-form-item label="所选门店" prop="serialNumber">
            <el-input v-model="ruleForm.serialNumber" :disabled="disableIinput" size="small" type="number" placeholder="请选择门店"/>
          </el-form-item>
          <el-form-item label="门店库存" prop="inventory">
            <el-input v-model="ruleForm.inventory" :disabled="disableIinput" size="small" type="text" placeholder="请输入库存数量"/>
          </el-form-item>
          <el-form-item label="商品备注" prop="remark">
            <el-input v-model="ruleForm.remark" :disabled="disableIinput" size="small" type="text" placeholder="请输入"/>
          </el-form-item>

        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否启用" prop="isWebMallItem">
            <el-radio-group v-model="ruleForm.isWebMallItem">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>

          </el-form-item>
          <el-form-item label="上传图片" prop="img_url">
            <el-upload
              :limit="1"
              :action="actionUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemoveOne"
              :on-exceed="handExceed"
              :file-list="mainfileList"
              :http-request="uploadFileImgOne"
              list-type="picture">
              <el-button :disabled="disableIinput" size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
         <!-- <el-form-item label="移动商城商品" prop="isMobileMallItem">
            <el-radio-group v-model="ruleForm.isMobileMallItem">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否新品" prop="isNew">
            <el-radio-group v-model="ruleForm.isNew">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          &lt;!&ndash; 一良新增 &ndash;&gt;
          <el-form-item label="是否推荐品" prop="isSellingHot">
            <el-radio-group v-model="ruleForm.isSellingHot">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否可分销" prop="isDistribution">
            <el-radio-group v-model="ruleForm.isDistribution">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否赠品" prop="isGift">
            <el-radio-group v-model="ruleForm.isGift">
              <el-radio :label="1" :disabled="disableIinput">赠品</el-radio>
              <el-radio :label="0" :disabled="disableIinput">非赠品</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="禁止空运" prop="isForbidAirCargo">
            <el-radio-group v-model="ruleForm.isForbidAirCargo">
              <el-radio :label="1" :disabled="disableIinput">禁止</el-radio>
              <el-radio :label="0" :disabled="disableIinput">不禁止</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="特殊液体" prop="isSpecialLiquid">
            <el-radio-group v-model="ruleForm.isSpecialLiquid">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生鲜商品" prop="isFresh">
            <el-radio-group v-model="ruleForm.isFresh">
              <el-radio :label="1" :disabled="disableIinput">是</el-radio>
              <el-radio :label="0" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="支持开增值税发票" prop="isSuppVatReceipt">
            <el-radio-group v-model="ruleForm.isSuppVatReceipt">
              <el-radio :label="1" :disabled="disableIinput">支持</el-radio>
              <el-radio :label="0" :disabled="disableIinput">不支持</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="进口商品" prop="isImported">
            <el-radio-group v-model="ruleForm.isImported">
              <el-radio :label="1" :disabled="disableIinput">进口</el-radio>
              <el-radio :label="0" :disabled="disableIinput">非进口</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="跨境电商商品" prop="isCrossBorderEc">
            <el-radio-group v-model="ruleForm.isCrossBorderEc">
              <el-radio :label="1" :disabled="disableIinput">跨境电商</el-radio>
              <el-radio :label="0" :disabled="disableIinput">非跨境电商</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="进口税则号" prop="tariffNo">
            <el-input v-model="ruleForm.tariffNo" :disabled="disableIinput" size="small" type="text" placeholder="请输入进口税则号"/>
          </el-form-item>
          <el-form-item label="税率" prop="taxRate">
            <el-input v-model="ruleForm.taxRate" :disabled="disableIinput" size="small" type="text" placeholder="请输入税率"/>
          </el-form-item>
          <el-form-item label="语言" prop="language">
            <el-select v-model="ruleForm.language" :disabled="disableIinput" size="small" placeholder="请选择">
              <el-option :value="0" label="zh_CN"/>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input v-model="ruleForm.memo" :disabled="disableIinput" autosize type="textarea" placeholder="备注"/>
          </el-form-item>-->
        </el-col>
      </el-row>
    </el-form>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <template v-if="dialogType === 1">
        <el-table
          ref="goodTable"
          :data="tableData.filter(data => !search || data.sellerName.toLowerCase().includes(search.toLowerCase()))"
          class="goodShopthead"
          stripe
          empty-text="暂无数据"
          @selection-change="chooseInstance">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" label="商家名称" prop="sellerName"/>

          <el-table-column align="center" label="商家类型">
            <template slot-scope="scope">{{ scope.row.sellerType }}</template>
          </el-table-column>

          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-size="pageSize"
          :total="rowCount"
          background
          small
          layout=" prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </template>

      <template v-else-if="dialogType === 2">
        <ul v-if="brandlist" class="goodShop">
          <li v-for="(item,index) of brandlist" :key="index" @click="brandBtn(item.brandId,item.brand)">{{ item.brand }}</li>
        </ul>
        <div v-else style="text-align: center">暂无数据</div>
      </template>

      <div class="btns-wrapper">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="small" @click="submmitFun">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as commodity from '../../../api/commodity'
  import { isvalidNull, validateNumber, validateMoney } from '../../../utils/validate'
  export default {
    /* eslint-disable vue/require-prop-types */
    props: ['type', 'editorData'],
    data() {
      const codeNumber = (rule, value, callback) => {
        if (!isvalidNull(value)) {
          return callback(new Error('请输入商品编码'))
        } else if (!validateNumber(value)) {
          return callback(new Error('请输入正确编码(只含数字)'))
        } else {
          callback()
        }
      }
      const goodPicNumber = (rule, value, callback) => {
        if (!isvalidNull(value)) {
          return callback(new Error('请输入价格'))
        } else if (!validateMoney(value)) {
          return callback(new Error('请输入正确价格'))
        } else {
          callback()
        }
      }
      return {
        // 品牌列表
        brandlist: null,
        pageNo: 1,
        pageSize: 5,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--商品品牌  2--商家
        dialogState: false,
        // 输入禁用
        disableIinput: false,
        // 编辑反显数据
        editorTabeldata: null,
        tableData: [],
        search: '',
        sellerName: '',
        ruleForm: {
          name: '',
          itemSubTitle: '',
          brandId: '',
          brand: '',
          sellerId: '',
          sellerName: '',
          coding: '',
          currency: 0,
          price: '',
          wholesalePrice: 0,
          source: '',
          remark: '',
          inventory: '',
          seoTitle: '',
          img_url: '',
          isWebMallItem: 1,
          isMobileMallItem: 1,
          isNew: 0,
          isSellingHot: 0,
          isGift: 0,
          isForbidAirCargo: 0,
          isSpecialLiquid: 0,
          isFresh: 0,
          isSuppVatReceipt: 0,
          isImported: 0,
          isCrossBorderEc: 0,
          tariffNo: '',
          taxRate: '',
          language: 0,
          memo: '',
          // 一良新增
          serialNumber: null,
          isDistribution: 0,
          freight: 0
        },
        rules: {
          name: [
            { required: true, message: '请输入商品标题', trigger: 'blur' }
          ],
          itemSubTitle: [
            { required: true, message: '请输入商品子标题', trigger: 'blur' }
          ],
          brand: [
            { required: true, message: '请选择商品品牌', trigger: 'blur' }
          ],
          coding: [
            { required: true, validator: codeNumber, trigger: 'blur' }
          ],
          price: [
            { required: true, validator: goodPicNumber, trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '商家'
        } else if (this.dialogType === 2) {
          return '商品品牌'
        }
      }
    },
    beforeMount() {
      if (this.type === 2 || this.type === 4) {
        this.editorTabeldata = this.editorData
        for (const key in this.ruleForm) {
          this.ruleForm[key] = this.editorTabeldata[key]
        }
      } else if (this.type === 3) {
        this.disableIinput = true
        this.editorTabeldata = this.editorData
        for (const key in this.ruleForm) {
          this.ruleForm[key] = this.editorTabeldata[key]
        }
      }
    },
    methods: {
      submmitFun() {
        this.ruleForm.sellerName = this.sellerName
        this.dialogState = false
      },
      // 商品品牌
      goodsName() {
        this.dialogType = 2
        this.dialogState = true
        this.brandList()
      },
      // 商家
      goodsShop() {
        this.dialogType = 1
        this.dialogState = true
        const param = {
          current: this.pageNo,
          size: this.pageSize
        }
        commodity.getMerchantsList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          this.tableData = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = 5
        })
      },
      brandList() {
        const param = {
          current: 1,
          size: 3000
        }
        commodity.getBrandList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          this.brandlist = res.data.data.records
        })
      },
      // 品牌列表选择
      brandBtn(bid, bname) {
        this.ruleForm.brand = bname
        this.ruleForm.brandId = bid
        this.dialogState = false
      },
      // 生成编码
      getSysNumberCode() {
        commodity.getSysNumber().then(res => {
          this.ruleForm.coding = res.data.data.longNumber
        })
      },
      chooseInstance(val) {
        if (val.length > 1) {
          this.$refs.goodTable.clearSelection()
          this.$refs.goodTable.toggleRowSelection(val.pop())
        } else {
          if (val.length !== 0) {
            this.ruleForm.sellerId = val[0].sellerId
            this.sellerName = val[0].sellerName
          }
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.goodsShop()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.goodsShop()
      },
      handleClose() {
        this.dialogState = false
      },
      incrementTotal() {
        const formName = 'ruleForm'
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('submitType', ['goodsinfor', true, this.ruleForm])
          } else {
            this.$emit('submitType', ['goodsinfor', false, this.ruleForm])
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss">

  .goodsBox{
    thead{
      .el-table-column--selection {
        .cell {
          display: none;
        }
      }
    }
    .el-form-item{
      margin-bottom: 12px;
    }
    .el-form-item__label{
      line-height: 18px;
      margin-top: 9px;
    }
    .el-form-item__error{
      top: 90%;
    }
    .el-pagination{
      text-align: right;
    }
    .el-dialog__header{
      margin-bottom: 0;
    }
    .el-table th{
      padding: 5px 0;
    }
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .goodShop{
    overflow: auto;
    margin: 0;
    padding: 0;
    li{
      list-style: none;
      float: left;
      margin: 7px 20px;
      color: #3c8dbc;
      font-size: 12px;
      cursor: pointer;
    }
    li:hover{
      color: #15a9ff;
    }
  }
</style>
